import './loading.css';
const PuzzelLoad = () => {

    const startAnimation = () => {
        
        const gridLoader = document.getElementById('girdLoader');
        gridLoader?.replaceChildren();
        const totalCells = 9;
        for (let i = 0; i < totalCells; i++) {
            const cell = document.createElement('div');
            cell.className = "grid-cell-item";
            cell.style.animationDelay = `${i * 0.1}s`;
            gridLoader?.appendChild(cell);
        }
    };

    return (
        <>
            <div >
                <button className="px-4 py-2 mb-3 bg-orange-500 hover:bg-blue-600 text-blue-600 rounded-md transition-colors" onClick={startAnimation}>Start loading Animation</button>
            </div>
            <div className="loader-container mt-1">
                <div className="grid-loader" id="girdLoader"></div>
            </div>
        </>
    );
};
export default PuzzelLoad;
